import React, { useState, useRef } from 'react';
import { Form, Input, Button, Typography, Spin, message, Card, Row, Col, Select } from 'antd';
import { CopyOutlined, DownloadOutlined } from '@ant-design/icons';
import CommonTour, { TourGuideButton } from '@/components/CommonTour';

const { Title, Text } = Typography;
const { TextArea } = Input;

export default function HeadlineCopyToutiao() {
  const [form] = Form.useForm();
  const [isGenerating, setIsGenerating] = useState<boolean>(false);
  const [generatedContent, setGeneratedContent] = useState<string>('');
  const [tourVisible, setTourVisible] = useState(false);

  // 使用HTML元素的ref引用方式
  const titleRef = useRef<HTMLDivElement>(null);
  const keywordRef = useRef<HTMLDivElement>(null);
  const styleRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
  const submitRef = useRef<HTMLDivElement>(null);
  const resultRef = useRef<HTMLDivElement>(null);

  const showTour = () => {
    // 延迟显示，确保DOM已经渲染
    setTimeout(() => {
      setTourVisible(true);
    }, 100);
  };

  // 生成今日头条文案的模拟函数
  const generateContent = (title: string, content: string, keyword: string, style: string): string => {
    // 这里是模拟生成内容的逻辑，实际应用中应该调用AI模型
    let result = `【${title}】\n\n`;

    // 模拟生成导语（符合今日头条风格）
    result += "大家好，我是XX，今天要和大家聊的是一个关乎我们每个人生活的话题——";
    result += `${keyword || title}。\n\n`;

    // 模拟正文内容
    if (content) {
      result += content + '\n\n';
    } else {
      result += "不知道大家有没有发现，最近几年，这个话题越来越受到人们的关注。从社交媒体到街头巷尾，几乎无处不在讨论这个问题。那么，为什么这个话题如此热门？它对我们的生活又有什么影响呢？\n\n";

      // 根据风格调整内容
      if (style === '深度分析') {
        result += "让我们先从历史背景说起。这个话题的起源可以追溯到XX年前...\n\n";
        result += "从数据上看，近年来相关指标呈现出明显的上升趋势...\n\n";
        result += "专家表示，这种现象背后反映了社会结构的深刻变化...\n\n";
      } else if (style === '案例故事') {
        result += "让我们来看一个真实的案例。李先生是一位普通的上班族...\n\n";
        result += "类似的故事还有很多，它们共同构成了这个话题的生动注脚...\n\n";
      } else if (style === '实用指南') {
        result += "针对这个问题，我们整理了以下几点实用建议：\n\n";
        result += "1. XXX\n";
        result += "2. XXX\n";
        result += "3. XXX\n\n";
      } else if (style === '热点追踪') {
        result += "就在上周，相关部门发布了最新政策...\n\n";
        result += "这一变化立刻引发了广泛讨论，各方观点不一...\n\n";
      }
    }

    // 结语（符合今日头条风格）
    result += "总的来说，这个话题不仅仅是一个简单的社会现象，更是一面镜子，反映了我们这个时代的变迁。你对这个话题有什么看法呢？欢迎在评论区留言讨论！\n\n";

    // 标签和引导关注
    result += `【关注我，获取更多${keyword || title}相关资讯】\n`;
    result += `#${keyword || title} #社会热点 #民生话题 #深度解析`;

    return result;
  };

  // 处理表单提交
  const handleSubmit = async (values: any) => {
    try {
      setIsGenerating(true);
      const { title, content, keyword, style } = values;

      // 模拟API请求延迟
      await new Promise(resolve => setTimeout(resolve, 1500));

      const generated = generateContent(title, content, keyword, style);
      setGeneratedContent(generated);
      message.success('今日头条文案生成成功！');
    } catch (error) {
      message.error('生成失败，请稍后重试');
    } finally {
      setIsGenerating(false);
    }
  };

  // 复制生成的内容
  const handleCopy = () => {
    navigator.clipboard.writeText(generatedContent).then(() => {
      message.success('内容已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败');
    });
  };

  // 下载生成的内容
  const handleDownload = () => {
    const blob = new Blob([generatedContent], { type: 'text/plain;charset=utf-8' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '今日头条文案.txt';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
    message.success('文件下载成功');
  };

  // 定义引导步骤
  const tourSteps = [
    {
      key: 'title',
      title: '输入文章标题',
      description: '请输入吸引人的文章标题',
    },
    {
      key: 'keyword',
      title: '输入核心关键词',
      description: '请输入文章的核心关键词',
    },
    {
      key: 'style',
      title: '选择文章风格',
      description: '选择您想要的文章风格，如深度分析、案例故事等',
    },
    {
      key: 'content',
      title: '核心内容摘要（可选）',
      description: '请输入你想表达的核心内容摘要，如不填写将自动生成',
    },
    {
      key: 'submit',
      title: '生成今日头条文案',
      description: '点击按钮生成符合今日头条风格的文案',
    },
    {
      key: 'result',
      title: '查看生成结果',
      description: '生成成功后，您可以在此处查看、复制或下载生成的文案',
    },
  ];

  // 组织ref引用
  const tourRefs = {
    title: titleRef,
    keyword: keywordRef,
    style: styleRef,
    content: contentRef,
    submit: submitRef,
    result: resultRef,
  };

  // 风格选项
  const styleOptions = [
    { label: '深度分析', value: '深度分析' },
    { label: '案例故事', value: '案例故事' },
    { label: '实用指南', value: '实用指南' },
    { label: '热点追踪', value: '热点追踪' },
  ];

  return (
    <>
      <div style={{ padding: '24px' }}>
        <div style={{ marginBottom: 24 }}>
          <Title level={2} style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
            今日头条文案生成
            <TourGuideButton onClick={showTour} />
          </Title>
        </div>
        <Card style={{ marginBottom: '24px' }}>
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
            initialValues={{
              style: '深度分析',
            }}
          >
            <Row gutter={[16, 16]}>
              <Col xs={24}>
                <Form.Item
                  name="title"
                  label="文章标题"
                  rules={[{ required: true, message: '请输入文章标题' }]}
                >
                  <div ref={titleRef}>
                    <Input placeholder="请输入吸引人的文章标题" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="keyword"
                  label="核心关键词"
                  rules={[{ required: true, message: '请输入核心关键词' }]}
                >
                  <div ref={keywordRef}>
                    <Input placeholder="请输入文章的核心关键词" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="style"
                  label="文章风格"
                  rules={[{ required: true, message: '请选择文章风格' }]}
                >
                  <div ref={styleRef}>
                    <Select placeholder="请选择文章风格" options={styleOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="content"
                  label="核心内容摘要（可选）"
                >
                  <div ref={contentRef}>
                    <TextArea rows={4} placeholder="请输入你想表达的核心内容摘要，如不填写将自动生成" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item>
                  <div ref={submitRef}>
                    <Button type="primary" htmlType="submit" loading={isGenerating} style={{ width: '100%' }}>
                      {isGenerating ? <Spin /> : '生成今日头条文案'}
                    </Button>
                  </div>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>

        {generatedContent && (
          <Card title="生成结果" extra={
            <div style={{ display: 'flex', gap: '8px' }}>
              <Button icon={<CopyOutlined />} onClick={handleCopy}>复制</Button>
              <Button icon={<DownloadOutlined />} onClick={handleDownload}>下载</Button>
            </div>
          }>
            <div ref={resultRef} style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: 1.6 }}>
              {generatedContent}
            </div>
          </Card>
        )}
      </div>

      <CommonTour
        open={tourVisible}
        onClose={() => setTourVisible(false)}
        steps={tourSteps}
        targetRefs={tourRefs}
      />
    </>
  );
}